import {AfterViewChecked, Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'app-ion-tags',
    templateUrl: './ion-tags.component.html',
    // styleUrls: ['./ion-tags.component.less'],
})
export class IonTagsComponent implements OnInit, AfterViewChecked {
    @Input() value: any; // 'XXXX'
    // type 和 color 属性二选一使用即可
    @Input() type: any;   // 'primary'('default') || 'success' || 'warning' || 'error' || 'invalid'
    @Input() color: any;  // 'primary'('blue') || 'green' || 'yellow' || 'red' || 'default'('')
    @Input() size: any;
    bgc: any; // 标签背景色
    fontc: any; // 字体颜色
    borderc: any; // 边框颜色
    lineheight: any; // 标签行高---暂时不用该设置

    /**
     * value: 标签显示的数据
     *
     *
     * type: 标签类型
     *  type = 'default' || 'primary'
     *  type = 'success'
     *  type = 'warning'
     *  type = 'error'
     *  type = 'invalid'
     *
     * color: 标签颜色
     *  color = 'default'
     *  color = 'red'
     *  color = 'yellow'
     *  color = 'green'
     *  color = 'blue'; #3a90ff
     *
     * size: 标签大小
     *  size = 'small'
     *  size = 'normal'
     *  size = 'default'
     *  size = 'large'
     *
     *
     */

    constructor() {
    }

    ngOnInit() {
        // 类型
        if (this.type) {
            switch (this.type) {
                case 'primary':
                case 'default':
                case null:
                    this.bgc = 'rgba(61, 194, 255,0.05)';
                    this.fontc = '#3a90ff';
                    this.borderc = '#3a90ff';
                    break;
                case 'success':
                    this.bgc = 'rgba(0,255,0,0.05)';
                    this.fontc = '#51bd78';
                    this.borderc = '#51bd78';
                    break;
                case 'warning':
                    this.bgc = 'rgba(255, 255, 0,0.05)';
                    break;
                case 'error':
                    this.bgc = 'rgba(255,0,0,0.05)';
                    break;
                case 'invalid':
                    this.bgc = '';
                    this.fontc = '';
                    this.borderc = '';
                    break;
                default:
                    this.bgc = 'rgba(61, 194, 255,0.05)';
                    this.fontc = '#3a90ff';
                    this.borderc = '#3a90ff';
                    break;
            }
        }

        // 颜色
        if (this.color) {
            switch (this.color) {
                case '':
                case 'primary':
                case 'default':
                case null:
                    this.bgc = '';
                    this.fontc = '';
                    this.borderc = '';
                    break;
                case 'red':
                    this.bgc = 'rgba(255,0,0,0.05)';
                    break;
                case 'yellow':
                    this.bgc = 'rgba(255, 255, 0,0.05)';
                    break;
                case 'green':
                    this.bgc = 'rgba(0,255,0,0.05)';
                    this.fontc = '#51bd78';
                    this.borderc = '#51bd78';
                    break;
                case 'blue':
                    this.bgc = 'rgba(61, 194, 255,0.05)';
                    this.fontc = '#3a90ff';
                    this.borderc = '#3a90ff';
                    break;
                default:
                    this.bgc = '';
                    this.fontc = '';
                    this.borderc = '';
                    break;
            }
        }

        // 大小
        if (this.size) {
            switch (this.size) {
                case '':
                case null:
                case 'default':
                case 'normal':
                    this.size = '14px';
                    break;
                case 'small':
                    this.size = '12px';
                    break;
                case 'large':
                    this.size = '16px';
                    break;
                default:
                    break;
            }
        }


    }

    ngAfterViewChecked() {


        // this.lineheight = document.getElementById('ionTags').style.height + 'px';

        // console.log('行高：' , document.getElementById('ionTags'));
        // console.log('行高：' , document.getElementById('ionTags').clientHeight + 'px');
        // console.log('行高：' , document.getElementById('ionTags').offsetHeight + 'px');
    }

}
